<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="搜索，展示">
  <meta name="Description" content="这是个摘要">
  <title>百度首页html</title>
  <style>
	  body{
		margin:0;
		padding:0;
		height:100%;
		width:100%;
		}
	/*导航*/
     .navBox{
		 height:30px;
		 width:100%;
         }
		 
	 .p_head{
		 float:right;
		 right: 120px;
		 font-size:14px;
		 margin:auto 0;
		 word-spacing:18px;
		 height:30px;
		 line-height:30px;
         }
		 
	 .gdlist{
		margin-left:18px;
		float:right;
		width:95px;
		height:30px;
		}
		
	 .gd{
		margin:0;
		padding:0;
		width:95px;
		height:30px;
		color:white;
		background:#346fe9;
		text-align:center;
		 }
	 .gdlist:hover
	 .gd{
	      transform:rotateY(-90deg);
		 }
	 .listtr{
	     transform:rotateY(90deg);
         background-color:white;
         width:95px;
         text-align:center;
         padding:0;
		 margin:0;
		 position:relative;
		 top:-45px;
		
		 }
	 .gdlist:hover
	     .listtr{
	     transform:rotateY(0deg);	
 
		 }
		
		#nuomi,#yinyue,#tupian,#zhidao,#wenku,#fyb{
			text-decoration:none;
			color:black;
		}
		#nuomi,#yinyue:hover,#tupian:hover,#zhidao:hover,#wenku:hover,#fyb:hover{
			text-decoration:underline;
		}
		ul{
			list-style:none;
		}
	/*中间*/
	#mid{
		width:100%
		height:400px;
		pisition:relative;
	}
	.mid{
		 clear:right;
	     width:50%; 
		 height:150px;
		 margin:auto;
		 line-height:150px;
		 margin-top:100px; 
		 text-align:center;   
    }
    .srk{
        width:600px   
		margin:auto;
		height:36px;
		text-align:center; 
		
    }
	#ss{
		width:50%;
		height:36px;
		margin:auto;
		border:1px solid gray;
	}
	#gender{
		cursor:pointer;
		width:100px;
		height:42px;
		background-color:#3366FF;
	}
	
	.contain a{	
		text-decoration: underline;
	}
    
    /*二维码及底部*/
	#foot{
		width:100%;
		heght:500px;
		margin_top:500px;
	}
    .ewm{
        width:100%;
        height:60px;    
        margin-top:0px;
		

    }  

   
    .p_ewm{
        width:60px;
        height:60px;
        margin:0 auto;
        margin-top:10%;
    }
	.foot{
		width:100%;			
		height:50px;			
		margin:0 auto;		
		margin-top:40px;;			
		text-align:center;			
		text-indent: 2em;			
		word-spacing:5px;
		color:black;
	}
	
	.p_foot{			
		text-indent: 2em;	
		margin-top:1%;
		font-size:12px;
	}

	#one{
		font-size:12px;
		color:color:black;
	}

  </style>
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" />
 </head>
 <body >
      
	 <div class="navBox" >
		 <div class="p_head">
			<a href="http://news.baidu.com/" id="xwtr">新闻</a>   
            <a href="https://www.hao123.com/" id="htr"> hao123</a> 
            <a href="https://map.baidu.com/" id="dttr">地图</a> 
            <a href="http://v.baidu.com/" id="sptr">视频 </a> 
			<a href="https://tieba.baidu.com/index.html" id="tbtr">贴吧</a> 
            <a href="http://xueshu.baidu.com/" id="xstr">学术</a> 
            <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5" id="dltr">登录 </a> 
            <a href="#" id="sztr">设置 </a>
			
			<div class="gdlist">
				<div class="gd">更多产品</div>
				   <div class="listtr">
					<ul>
					<li><a href="https://www.baidu.com" style="color:#000000">更多产品</a></li> 
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/><a id="nuomi" href="http://www.nuomi.com/?cid=002540" name="nuomi"><span class="nuomi">糯米</span></a></li>
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/> <a id="yinyue" href="http://music.taihe.com" name="yinyue"><span class="yinyue">音乐</span></a></li>
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/><a id="tupian" href="http://image.baidu.com" name="tupian"><span class="tupian">图片</span></a></li>
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/><a id="zhidao" href="http://zhidao.baidu.com" name="zhidao"><span class="zhidao">知道</span></a></li>
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/><a id="wenku" href="http://wenku.baidu.com" name="wenku"><span class="wenku">文库</span></a></li>
					<li><img style="margin-bottom:-14px"src="picture.png"/><br/><a id="fyb" href="http://top.baidu.com" name="fyb"><span class="fyb">风云榜</span></a></li>
					<li><a id="qbcp" href="//www.baidu.com/more/" name="qbcp"><span class="qbcp">全部产品</span></a></li>
					</ul>
				</div>
			 </div>
		 </div>
     </div>
     
<!--中间-->
<div id="mid">
	<!--图片-->
      <div class="mid" >
         <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank">
          <img  height=130 width=270 src="bd_logo1.png" title="百度一下你就知道"/>
          </a>  
      </div>
<!--输入框-->
	  <div class="srk" >
		 <input id="ss" type="text"/>
		 <a href="#" id="ss" class="ss" style="display:none"></a>
		 <input id="gender" name="gender" type="submit"  value="百度一下"/>  
	
	  </div>
 </div>
 
 <div id="foot">
<!--二维码-->
    <div class="ewm" >
        <p class="p_ewm" style="margin-left:48%;">
           <img  height=60 width=60 src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/><br/>
	&nbsp;&nbsp;百度
        </p>

    </div>

<!--底部链接-->
     <div class="foot">
		<p id="one"> 
		<a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>
		 <a href="http://home.baidu.com/">关于百度</a>
		 <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
		 <a href="http://e.baidu.com/?refer=888">百度推广</a>
		</p>

	   <p class="p_foot">
		 ©2019 Baidu
		 <a href="http://jianyi.baidu.com/">使用百度前必读 意见反馈 </a>
		 京ICP证030173号 
		 <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号 </a>
	   </p>
	 </div>
</div>	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
	 
 <script type="text/javascript">
 	 var oText=document.getElementById("text");
 
 	 oText.onkeyup=function()
 	 {
 		 var textValue=document.getElementById("text").value;
        /* var oText-list=document.getElementById("text-list").value;*/
 		  if(textValue.length>0){
 			  document.getElementById("text-list").style.display = "block";
 			  /*oText-list.style.display="none";*/			  
 		   }
 	 }
 	
 	 var div = document.getElementById("mTop")
 	 var lis = div.getElementsByTagName("li");
 	 var mainContents = document.getElementsByClassName("main-content");
 	 for(var i=0;i<lis.length;i++) {
 		 //debugger
 		 lis[i].onclick = function(index)//匿名函数index
		 {
 			return function(){
 			  for(var j=0;j<lis.length;j++){
 				 if(j == index){
 					 lis[j].style.backgroundColor = "rgba(235,235,235,0.5)";		    
 					 mainContents[j].style.display = "block";						
 				 }else{
 					lis[j].style.backgroundColor = "transparent";
 					mainContents[j].style.display = "none";
 				 }
 			  }
 			};
 		}(i)//调用i
 	 }

 </script>

 </body>
</html>
